@use 'sass:map';

.saas-title {
  &::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 15px;
    vertical-align: sub;
    margin-right: 10px;
    border-radius: map.get($border-radius, 'base');
  }

  &.saas-title-primary::before {
    background-color: $color-primary;
  }

  &.saas-title-danger::before {
    background-color: $color-danger;
  }

  &.saas-title-default::before {
    background-color: $color-black;
  }

  &.saas-title-success::before {
    background-color: $color-success;
  }

  &.saas-title-warning::before {
    background-color: $color-warning;
  }

  &.saas-title-info::before {
    background-color: $color-info;
  }
}
